import React, { Fragment } from "react";
import { Row, Col, Typography, Spin, Alert } from "antd";
import { WithTranslation, withTranslation } from "react-i18next";
import { connect } from "react-redux";
import { giveMeProdcutDataAction } from "../../redux/action/recommentdAction";
import {
  SideMenu,
  Carousels,
  ProductCollection,
  Cooperative,
} from "../../components";
import { MainLayout } from "../../layouts/mainLayout";
import { RootState } from "../../redux/store";
import sider_1 from "../../assets/images/sider_1.png";
import sider_2 from "../../assets/images/sider_2.png";
import sider_3 from "../../assets/images/sider_3.png";
import styles from "./HomePage.module.css";

// interface productListProps {
//   title: string,
//   id: number,
//   description: string,
//   touristRoutes: []
// }
class HomePageClass extends React.Component<WithTranslation & ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps>> {
  async componentDidMount() {
    this.props.geveMeProductDataAction()
  }
  render() {
    const { loading, error, productList, t } = this.props;
    if (loading) {
      return <Spin size="large" tip="loading..." style={{ marginTop: 200, marginLeft: "auto", marginBottom: 200, marginRight: "auto", width: "100%" }} />
    }
    if (error) {
      return <Alert message={error.data} type="error" description="数据请求出错，请检查接口配置" closable />
    }
    if (productList.length > 0) {
      return (
        <div className={styles.App}>
          <MainLayout>
            <div className={styles["page-container"]}>
              <Row style={{ marginTop: 20 }}>
                <Col span={6} style={{ paddingRight: 30 }}>
                  <SideMenu></SideMenu>
                </Col>
                <Col span={18}>
                  <Carousels></Carousels>
                </Col>
              </Row>
              {/* 爆款推荐 */}
              <Fragment>

                <ProductCollection
                  key={productList[0].id}
                  title={
                    <Typography.Title level={3} type="warning">
                      {t("home_page.hot_recommended")}
                    </Typography.Title>
                  }
                  sideImage={sider_1}
                  products={productList[0].touristRoutes}
                ></ProductCollection>
                {/* 新品上市 */}
                <ProductCollection
                  key={productList[1].id}
                  title={
                    <Typography.Title level={3} type="danger">
                      {t("home_page.new_arrival")}
                    </Typography.Title>
                  }
                  sideImage={sider_2}
                  products={productList[1].touristRoutes}
                ></ProductCollection>
                {/* 国内游推荐 */}
                <ProductCollection
                  key={productList[2].id}
                  title={
                    <Typography.Title level={3} type="success">
                      {t("home_page.domestic_travel")}
                    </Typography.Title>
                  }
                  sideImage={sider_3}
                  products={productList[2].touristRoutes}
                ></ProductCollection>
              </Fragment>
            </div>
            {/* 企业合作 */}
            <Cooperative>
              {t("home_page.joint_venture")}
            </Cooperative>
          </MainLayout>
        </div>
      );
    }
  }
}

const mapStateToProps = (state: RootState) => ({
  loading: state.recommentdProducts.loading,
  error: state.recommentdProducts.error,
  productList: state.recommentdProducts.productList
})

const mapDispatchToProps = (dispatch: any) => ({
  geveMeProductDataAction: () => {
    dispatch(giveMeProdcutDataAction())
  }
})

// export const HomePage: React.FC = () => {
//   const { t } = useTranslation();
//   const dispatch = useDispatch()

//   const [loading, setLoading] = useState(true);
//   const [productList, setProductList] = useState<Array<productListProps>>([])
//   const [error, setError] = useState<string | null>(null);
//   // 获取旅游列表
//   const getProdctCollection_List = async () => {
//     try {
//       const res = await ProdctCollection_List();
//       const payload = fetchRecommendProducSuccessAction(res);
//       const reslut = dispatch(payload);
//       setLoading(loading => loading = false)
//       setProductList(productList => productList = reslut.payload);
//     } catch (errors) {
//       setLoading(loading => loading = false);
//       const res = fetchRecommendProducFailAction(errors);
//       setError(error => error = res.payload.data);
//     }

//   }

//   useEffect(() => {
//     getProdctCollection_List()
//   }, [])

//   if (loading) {
//     return <Spin size="large" tip="loading..." style={{ marginTop: 200, marginLeft: "auto", marginBottom: 200, marginRight: "auto", width: "100%" }} />
//   }
//   if (error) {
//     return <Alert message={error} type="error" description="数据请求出错，请检查接口配置" closable />
//   }
//   if (productList.length > 0) {
//     return (
//       <div className={styles.App}>
//         <Layout.Header className={styles["ant-layout-header"]}>
//           <Header></Header>
//         </Layout.Header>
//         <div className={styles["page-container"]}>
//           <Row style={{ marginTop: 20 }}>
//             <Col span={6} style={{ paddingRight: 30 }}>
//               <SideMenu></SideMenu>
//             </Col>
//             <Col span={18}>
//               <Carousels></Carousels>
//             </Col>
//           </Row>
//           {/* 爆款推荐 */}
//           <Fragment>

//             <ProductCollection
//               key={productList[0].id}
//               title={
//                 <Typography.Title level={3} type="warning">
//                   {t(productList[0].title)}
//                 </Typography.Title>
//               }
//               sideImage={sider_1}
//               products={productList[0].touristRoutes}
//             ></ProductCollection>
//             {/* 新品上市 */}
//             <ProductCollection
//               key={productList[1].id}
//               title={
//                 <Typography.Title level={3} type="danger">
//                   {t(productList[1].title)}
//                 </Typography.Title>
//               }
//               sideImage={sider_2}
//               products={productList[1].touristRoutes}
//             ></ProductCollection>
//             {/* 国内游推荐 */}
//             <ProductCollection
//               key={productList[2].id}
//               title={
//                 <Typography.Title level={3} type="success">
//                   {t(productList[2].title)}
//                 </Typography.Title>
//               }
//               sideImage={sider_3}
//               products={productList[2].touristRoutes}
//             ></ProductCollection>
//           </Fragment>
//         </div>
//         {/* 企业合作 */}
//         <Cooperative>
//           {t("home_page.joint_venture")}
//         </Cooperative>
//         <Footer></Footer>
//       </div>

//     );
//   }
//   return <></>
// };

export const HomePage = connect(mapStateToProps, mapDispatchToProps)(withTranslation()(HomePageClass));
